import React from 'react'
import './index.scss'

interface Iprops {
  data: Idata
}

interface Idata {
  name?: string
  imgUrl?: string
  message: string
  isSelf?: boolean
  isSystem?: boolean
}


export default function RealChatItem(props: Iprops) {
  const { data } = props

  return (
    <>
      {
        data.isSystem
          ?
          (
            <div className='RealChatItem'>
              <div className='RealChatItem-System'>
                <span className='RealChatItem-System-Message'>{data.message}</span>
              </div>
            </div>
          )
          :
          (
            <div className={`RealChatItem ${data.isSelf ? 'self' : ''}`}>
              <img className='RealChatItem-userImg' src={data.imgUrl} alt="" />
              <div className='RealChatItem-Info'>
                <span className='RealChatItem-Info-userName'>{data.name}</span>
                <div className='RealChatItem-Info-Message' dangerouslySetInnerHTML={{ __html: data.message }}>
                </div>
              </div>
            </div>
          )
      }

    </>
  )
}
